<template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide :class="activeIndex == -1 ? 'swiper-active':''"><div class="item" @click="handleClick('全部',-1)">全部</div></swiper-slide>
    <swiper-slide v-for="(item,index) in lists" :key="item.id" :class="activeIndex === index ? 'swiper-active':''"><div class="item" @click="handleClick(item.name,index)">{{item.name}}</div></swiper-slide>
  </swiper>
</template>

<script>
export default {
  name: "littleType",
  props: {
    lists: {
      type: Array,
      default: ()=>{}
    },
  },
  data() {
    return {
      activeIndex:-1,
      swiperOption: {
        slidesPerView: 6,
        spaceBetween: 5,
        freeMode: true,
      },
    };
  },
  methods: {
    handleClick(name,index) {
      this.activeIndex = index;
      this.$emit("choose-types",name)
    }
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  font-size: 12px;
  width: 100%;
  height: 30px;
  padding: 0 15px;
  margin-bottom: 10px;
  .swiper-slide {
    border-radius: 2px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }
  .swiper-active {
    color: red;
    background: #ccc;
  }
}
.item{
  width: 100%;
  height: 100%;
  line-height: 25px;
}
</style>